<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 简介</title>
    <script>

    </script>
</head>
<body>
    <!--
    DOM  document object model  文档对象模型
    页面加载的时候,浏览器创建页面的DOM
    JavaScript 能够改变页面中的所有 HTML 元素
    JavaScript 能够改变页面中的所有 HTML 属性
    JavaScript 能够改变页面中的所有 CSS 样式
    JavaScript 能够对页面中的所有事件做出反应
    -->
    <p id="intro">Hello World!</p>
    <p>本例演示 <b>getElementById</b> 方法！</p>
    <script>
        /**/
        x=document.getElementById("intro");
        document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');

    </script>

    <div id="main">
        <p>The DOM is very useful.</p>
        <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
    </div>
    <script>

        /*通过标签名 查找html 元素*/
        var m=document.getElementById("main");
        var y=m.getElementsByTagName("p");  /* 此 div 中有个两个p元素 这样拿到的是第一个元素 */
        document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
    </script>
</body>
</html>